import React, { Component } from "react";
import { withRouter } from "react-router-dom";
import { Icon } from "antd";
import BScroll from 'better-scroll'
import _ from 'lodash'
import {get} from '../../utils/http'
class Navlist extends Component {
  constructor() {
    super();
    this.state = {
      list1: [],
      list2: [],
      list3:[],
      listitem:[],
      currentindex1: 0,
      tab:'whole',
      country:'',
      id:0,
      flag:0
      
    };
  }
  handleclick =async (index,tab) => {      
     this.setState({
      currentindex1: index,
      tab
    }); 
    let urls=`https://m.tuniu.com/travel/mapi/search/getSearchList?bookCity=200&bookCityName=北京&limit=20&paramType=3&keyword=${this.state.country}&tabKey=${tab}&poiId=${this.state.id}&catId=${this.state.id}&locateCityCode=200&searchKeys=[]&pageNum=1&newSaleChannels=[]&_=1576293524832067466902716635490`
    let urlh=`https://m.tuniu.com/travel/mapi/search/getSearchList?bookCity=200&bookCityName=北京&limit=20&paramType=2&keyword=${this.state.country}&tabKey=${tab}&catId=${this.state.id}&locateCityCode=200&searchKeys=[]&pageNum=1&newSaleChannels=[]&_=1576048308597084397797543494592`
    let url=''
       if(~~this.state.flag){
           url=urlh  
       }else{
         url=urls
       }
 
    let result=await get(url)  
    this.setState({
      listitem:result.data.data.list,
      list2: result.data.data.filterPositions,
      list3:result.data.data.recommendFilters,
    })
  }

  toclick=(value)=>{
    //console.log(value);  
    //let result=await get(`https://m.tuniu.com/travel/mapi/search/getSearchList?bookCity=200&bookCityName=北京&limit=20&paramType=2&keyword=海南&tabKey=${this.state.tab}&catId=67&locateCityCode=200&searchKeys=[${value}]&pageNum=1&newSaleChannels=[]&_=1576048308597084397797543494592`)  
  }
  componentDidMount() {
   // console.log(this.props);  
    var that=this
    this.setState({
      list1: this.props.location.state.data.tabKeys,
      list2: this.props.location.state.data.filterPositions,
      list3:this.props.location.state.data.recommendFilters,
      listitem:this.props.location.state.data.list,
      country:this.props.match.params.name,
      id:this.props.match.params.id,
      flag:this.props.match.params.flag
    });
    const wrapper = document.querySelector('.citylist')
    const bs=new BScroll(wrapper,{  click: true,
        pullDownRefresh: true,
        pullUpLoad: true,
    })      
    bs.on("pullingDown", function () {                          
        bs.finishPullUp();
        bs.finishPullDown();                   
       bs.refresh()
    })
    bs.on("pullingUp",_.debounce(async function () {   
        let page=1
             page++
       let result=await get(`https://m.tuniu.com/travel/mapi/search/getSearchList?bookCity=200&bookCityName=北京&limit=20&paramType=2&keyword=海南&tabKey=${that.state.tab}&catId=67&locateCityCode=200&searchKeys=[]&pageNum=${page}&newSaleChannels=[]&_=1576048308597084397797543494592`)
       
         that.setState({
        listitem:[...that.state.listitem,...result.data.data.list]
       })                      
       bs.finishPullUp();
       bs.finishPullDown();                   
       bs.refresh()
   },500))
  }
  todetail=async (value)=>{
    let result=await get(` https://m.tuniu.com/wap-detail/api/self/detail/getProductInfo?d={"productId":"${value.productId}","journeyId":0,"bookCityCode":200}&_=1576071362011`)

    this.props.history.push({pathname: '/detail', state: { data:result.data}})   
    
  }
  render() {
    return (
      <div className="main">
      <div className="nav1">
        <ul>
          {this.state.list1.map((value, index) => {
            return (
              <li
                className={this.state.currentindex1 == index ? "show" : ""}
                onClick={() => {
                  this.handleclick(index,value.tabKey);
                }}
                key={value + index}
              >
                {value.tabName}
              </li>
            );
          })}
        </ul>
        <ul>
          {this.state.list2.map((value, index) => {
            return (
              <li className={0 == index ? "show" : ""} key={value + index}>
                {value.positionName}{" "}
                <span>
                  <Icon type="caret-down" />
                </span>
              </li>
            );
          })}
        </ul>
        <ol>
          {
            this.state.list3.map((value2,index2)=>{
            return (
              <li key={value2+index2} onClick={() => {
                this.toclick(value2)
              }
              }>
           {value2.filterName}
          </li>        
            )   
            })
          }
         
        </ol>
      </div>
      <div className="citylist">
      <ol>
        {
          this.state.listitem.map((value,index)=>{
            return (
              <li key={value+index} onClick={() => {
                this.todetail(value)
              }
              }>
              <div>
                <img src={value.largeImage} alt=""/>
            <span className="icon-top">{value.iconName}</span>
          <span className="icon-foot">{value.startCityName}出发</span>
                </div>
                <div>
                 <p><span>{value.name}</span>  
                  </p>
                  <p className='ad'>
                    <span>广告</span>
                    <span>瓜果亲子游</span>
                  <span>三亚成团</span>
                  <span>有自由活动</span>
                  <span>情侣蜜月</span>
                  </p>
          <h6 className="time"><span>{value.supplier}</span><span>{value.planDates}</span> </h6>
            <h5 className="price"><div>￥<span>{value.price}</span>起</div>
            <div><span>{value.travelCountDesc}</span>
            <span>{value.satisfactionDesc}</span>
                  </div>
                  </h5>
                </div>
            </li>
            )
          })
        }
        
        </ol>
      </div>
      </div>
    );
  }
}
export default withRouter(Navlist);
